<template>
  <view v-if="goodsInfo">
      <!-- 轮播图 -->
      <u-swiper 
      :list="goodsInfo.pics" 
      name="pics_big"
      :height="500"
      img-mode="aspectFit"
      bg-color="#fff"
      @click="handlePreviewImage"
      ></u-swiper>
      <!-- 价格和名称 -->
      <view class="goods-info u-p-20">
          <!-- 价格 -->
          <view class="goods-price">￥{{goodsInfo.goods_price}}</view>
          <!--名称  -->
          <view class="goods-name u-line-2">{{goodsInfo.goods_name}}</view>
      </view>
      <u-line color="#eee" />
      <u-line color="#eee" />
      <u-line color="#eee" />
      <u-line color="#eee" />
      <!-- 图文详情 -->
      <view class="goods-detail-wrap">
          <!-- 标题 -->
            <view class="title u-text-center u-m-10 u-font-30">图文详情</view>
            <!-- 详情 -->
            <!--第一种方法： vue中的用法，uniapp不建议使用 -->
            <!-- <view v-html="goodsInfo.goods_introduce"></view> -->
            <!-- 第二种渲染标签方法：小程序中应用于更简单的场景 -->
            <!-- <rich-text :nodes="goodsInfo.goods_introduce"></rich-text>
             -->
             <!-- 第三种方法 适用于文章详情，图片详情 -->
             <u-parse :html="goodsInfo.goods_introduce"></u-parse>
      </view>
      <!--提交订单页面  -->
      <view class="navigation">
		<view class="left">
			<view class="item u-text-center">
				<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-line-1">联系客服</view>
			</view>
			<navigator class="item car" open-type="switchTab" url="/pages/cart/cart">
				<u-badge class="car-num" :count="totalCount" type="error" :offset="[-3, -6]"></u-badge>
				<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
				<navigator  class="text u-line-1">购物车</navigator>
			</navigator>
		</view>
		<view class="right">
			<view class="cart btn u-line-1" @click="handlePush">加入购物车</view>
			<view class="buy btn u-line-1">立即购买</view>
		</view>
	</view>
  </view>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data(){
        return{
            goodsInfo:null
        }
    },
    computed:{
        ...mapState(["cartList"]),
        // 获取加入购物车的总数量
          // 总商品数量
    totalCount() {
      // reduce
    //   return this.cartList.reduce((sum, goods) => (sum += goods.num), 0);
    return this.cartList.reduce((sum,item)=>(sum+=item.num),0)
    },
        
    },
    // 通过id获取数据
async onLoad(option){
    // 获取id
const {goods_id} = option || 43986
    // 发请求获取数据
    const res = await this.$u.get('/goods/detail',{goods_id})
    console.log(13,res);
    this.goodsInfo = res.message
},
    methods:{
        // 点击图片预览（组件u-image点击事件自带点击的当前下标）
        handlePreviewImage(index){
            // 获取要预览图片的链接数组
            const urls = this.goodsInfo.pics.map(item=>item.pics_big_url)
            // 获取点击当前页的index
            const current = urls[index]
            // 调用uniapp的一个图片预览组件
            uni.previewImage({urls,current})
        },


        // 点击购物车触发
        handlePush(){
            // 1.判断如果商品之前没被添加过（怕段id是否存在），直接给数组push添加
            const index = this.cartList.findIndex((item) => this.goodsInfo.goods_id === item.goods_id)
            const newList = [...this.cartList]
            // 不存在
            if(index === -1){
                newList.push({
                    ...this.goodsInfo,
                    // 选中状态
                    checked:true,
                    // 商品数量
                    num:1,
                    // 隐藏删除按钮
                    show:false
                })
            }else{
                // 2.如果该商品已经存在于购物车中，修改该商品的购买数量
                newList[index].num++
            }
            // 调用mutation修改state
            this.$store.commit('setCartList',newList)
            console.log(109,this.cartList);
            
        }
    }
}
</script>

<style lang="scss" scoped>
.goods-detail-wrap{
    padding-bottom: 94rpx;
}
.navigation {
    position: fixed;
    bottom: 0;
    left: 0;
    // 块级元素在绝对||固定定位后会变成行内块元素，宽高由内容撑开，所以得加宽度100%
    width: 100%;
	display: flex;
    justify-content: space-around;
	margin-top: 100rpx;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 16rpx 0;
	.left {
		display: flex;
		font-size: 20rpx;
		.item {
			margin: 0 30rpx;
			&.car {
				text-align: center;
				position: relative;
				.car-num {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
		}
	}
	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;
		.btn {
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
		}
		.cart {
			background-color: #ed3f14;
			margin-right: 30rpx;
		}
		.buy {
			background-color: #ff7900;
		}
	}
}
// .goods-info{
//     display: flex;
//     flex-direction: column;
//     justify-content: space-around;
// }
.goods-price{
    color: $themeColor;
    margin-bottom: 19rpx
    ;
}
</style>